<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css" rel="stylesheet">
</head>

<body>
    <div id="div">
        <el-table :data="personList" style="width: 100%">
            <el-table-column prop="date"  label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name"  label="姓名" width="180">
                    <!-- 作用域插槽 -->
                <template #default="{row}">
                    <h1>{{row.name}}</h1>
                </template>

            </el-table-column>
            <el-table-column prop="address"  label="地址"></el-table-column>
            <el-table-column label="操作">
                <!-- 作用域插槽 -->
                <template #default="scope">
                    <el-button type="danger" @click="personList.splice(scope.$index,1)">删除</el-button>
                <el-button type="success">详情</el-button>
                </template>
            </el-table-column>


        </el-table>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>

    <script>
        //app本生也是组件，根(root)组件
        const app = Vue.createApp({
            data() {
                return {
                    personList:[
                        {
                            date:'2023-04-11',
                            name:'张三',
                            address:'龙岩'
                        },
                        {
                            date:'2023-03-11',
                            name:'李四',
                            address:'福州'
                        },
                        {
                            date:'2023-02-11',
                            name:'王五',
                            address:'龙岩'
                        },
                    ]
                }
            }
        });

        app.use(ElementPlus);

        app.mount('#div');

    </script>

</body>

</html>